.x-notice-bar {
	position: relative;
	display: flex;
	align-items: center;
	height: $notice-bar-height;
	padding: $notice-bar-padding;
	color: $notice-bar-text-color;
	font-size: $notice-bar-font-size;
	line-height: $notice-bar-line-height;
	background-color: $notice-bar-background-color;

	&__left-icon,
	&__right-icon {
		min-width: $notice-bar-icon-min-width;
		font-size: $notice-bar-icon-size;
	}

	&__right-icon {
		text-align: right;
		cursor: pointer;
	}

	&__wrap {
		position: relative;
		flex: 1;
		height: $notice-bar-line-height;
		overflow: hidden;
	}

	&__content {
		position: absolute;
		white-space: nowrap;

		&.x-ellipsis {
			max-width: 100%;
		}
	}

	&__play {
		animation: x-notice-bar-play 18s linear 0s both;

		&--infinite {
			animation: x-notice-bar-play-infinite 18s linear 0s infinite both;
		}
	}

	&--wrapable {
		height: auto;
		padding: $notice-bar-wrapable-padding;

		.x-notice-bar {
			&__wrap {
				height: auto;
			}

			&__content {
				position: relative;
				white-space: normal;
				word-wrap: break-word;
			}
		}
	}
}

/**
 * Declare two same keyframes
 * In case that some mobile browsers can continue animation when className changed
 */
@keyframes x-notice-bar-play {
	to {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes x-notice-bar-play-infinite {
	to {
		transform: translate3d(-100%, 0, 0);
	}
}
